<template>
  <el-form :model="noticeForm" class="pageWrap" label-width="auto">
    <el-form-item label="标题" required>
      <el-input v-model="noticeForm.noticeTitle" placeholder="标题" style="width:100%;float:left"></el-input>
    </el-form-item>
    <el-form-item label="封面">
      <el-upload ref="upbanner" class="avatar-uploader" :action="upLoadUrl" :show-file-list="false"
        :on-success="(value)=> picSuccess(value)" :before-upload="(file)=> beforeUpload(file)" name="img">
        <img v-if="noticeForm.noticeCover" :src="noticeForm.noticeCover" class="avatar banner" />
        <i v-else class="el-icon-plus avatar-uploader-icon banner"></i>
      </el-upload>
      <span class="tips">注：请上传jpg格式，建议尺寸400*247 长方形</span>
    </el-form-item>
    <el-form-item v-if="showTop">
      <span>开启顶部消息通知{{showTop}}</span>
      <el-switch v-model="noticeForm.state" active-color="#13ce66" inactive-color="#ff4949" :active-value="1"
        :inactive-value="0"></el-switch>
    </el-form-item>
    <el-form-item label="内容" required>
      <RichTxt ref="editor"></RichTxt>
    </el-form-item>
    <el-button type="primary" @click="saveNotice()" class="btn">保存</el-button>

    <div class="looKWrap" v-if="!isArt">
      <div class="lookBox" v-for="(v,i) in allNotice" :key="i">
        <img class="im" v-if="v.noticeCover" :src="v.noticeCover" alt />
        <div class="st">
          <p>{{v.noticeTitle}}</p>
          <p>{{v.creatTime}}</p>
        </div>
        <div class="rt">
          <el-button type="primary" @click="editNotice(v)">修改</el-button>
          <el-button type="danger" @click="delNotice(v.id)">删除</el-button>
        </div>
      </div>
    </div>
  </el-form>
</template>

<script>
  //富文本
  import RichTxt from "../../../components/editor/editor";
  export default {
    components: {
      RichTxt
    },
    props: {
      isArt: {
        default: false
      },
      artId: {},
      noticeId: {}
    },
    data() {
      return {
        noticeForm: {
          noticeTitle: "",
          noticeCover: "",
          noticeContent: "",
          state: 0,
        },
        upLoadUrl: this.$url + "/sbr/match/uploadImg",
        allNotice: [],
        showTop: false
      };
    },
    watch: {
      isArt: {
        // 执行方法
        handler(n, o) {
          //  console.log('newVal-----',n,o)
          if (!n) {
            this.getNotice();
            let s = sessionStorage.getItem('mold')
            if (s) {
              let t = this.$Base64.decode(s)
              if (t != 'H') this.showTop = true
            } else this.showTop = false
          } else {
            this.showTop = false
          }
          this.$forceUpdate()
        },
        deep: true, // 深度监听
        immediate: true // 第一次改变就执行
      },
      noticeId: {
        // 执行方法
        handler(n, o) {
          if (n) {
            this.getArtNotice()
          }
        },
        deep: true, // 深度监听
        immediate: true // 第一次改变就执行
      }
    },
    methods: {
      picSuccess(v) {
        this.noticeForm.noticeCover = v.data.filePath;
      },
      beforeUpload(file) {
        if (this.noticeForm.noticeCover) {
          let pp = this.noticeForm.noticeCover.split("/");
          pp = this.$Base64.encode(pp[pp.length - 1]);
          this.$axios.get("/sbr/match/delImg?fileName=" + pp);
        }
        const isJPG = file.type === "image/jpeg";
        const isLt1M = file.size / 1024 / 1024 < 1;
        if (!isJPG) {
          this.$message.error("上传图片只能是 JPG 格式!");
        }
        if (!isLt1M) {
          this.$message.error("上传图片大小不能超过 1MB!");
        }
        return isJPG && isLt1M;
      },
      // 获取所有
      getNotice() {
        if (this.isArt) return
        this.$axios
          .get(
            "/sbr/notice/getMatchNoticeByMatchId/" +
            sessionStorage.getItem("MandA")
          )
          .then((res) => {
            let rr = res.data.data;
            rr.forEach(v => {
              v.state = v.state ? v.state : 0
            })
            this.allNotice = rr;
          });
      },
      // 修改
      editNotice(v) {
        this.noticeForm = JSON.parse(JSON.stringify(v));
        this.$refs.editor.content = v.noticeContent;
      },
      // 查询文章公告
      getArtNotice() {
        this.$axios.get('/sbr/notice/getMatchNoticeById?id=' + this.noticeId).then(res => {
          let rr = res.data.data
          this.noticeForm.noticeTitle = rr.noticeTitle
          this.noticeForm.noticeCover = rr.noticeCover
          this.$nextTick(function () {
            // console.log(this.$refs.editor);
            this.$refs.editor.content = rr.noticeContent
          });
        })
      },
      // 保存
      saveNotice() {
        this.noticeForm.noticeContent = this.$refs.editor.content;
        if (!this.noticeForm.noticeTitle) {
          this.$message.error("请填写标题");
          return false;
        }
        if (!this.noticeForm.noticeContent) {
          this.$message.error("请填写内容");
          return false;
        }
        if (this.isArt) {
          this.noticeForm.id = this.noticeId ? this.noticeId : ''
          this.noticeForm.artid = this.artId
          if (this.noticeId) this.saveEditArt()
          else {
            this.$axios
              .post("/sbr/match/addNoticeAdvertise", this.noticeForm)
              .then((res) => {
                let rr = res.data.data;
                this.noticeForm = {
                  noticeTitle: "",
                  noticeCover: "",
                  noticeContent: "",
                };
                this.$refs.editor.content = "";
                this.$message.success("保存成功");
                this.$emit('onclose')
                // this.noticeId = ''
                // this.artId = ''
              });
          }
        } else {
          this.noticeForm.matchId = this.$Base64.decode(
            sessionStorage.getItem("MandA")
          );
          this.$axios
            .post("/sbr/notice/putMatchNotice", this.noticeForm)
            .then((res) => {
              let rr = res.data.data;
              this.noticeForm = {
                noticeTitle: "",
                noticeCover: "",
                noticeContent: "",
              };
              this.$refs.editor.content = "";
              this.$message.success("保存成功");
              this.getNotice();
            });
        }
      },
      // 文章公告 修改保存
      saveEditArt() {
            this.$axios
              .post("/sbr/notice/putMatchNotice", this.noticeForm)
              .then((res) => {
                let rr = res.data.data;
                this.noticeForm = {
                  noticeTitle: "",
                  noticeCover: "",
                  noticeContent: "",
                };
                this.$refs.editor.content = "";
                this.$message.success("保存成功");
                this.$emit('onclose')
                // this.noticeId = ''
                // this.artId = ''
              });
      },
      // 删除
      delNotice(id) {
        this.$confirm("此操作将删除该公告, 是否继续?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
          .then(() => {
            this.$axios
              .get("/sbr/notice/delMatchNotice?id=" + id)
              .then((res) => {
                this.$message.success("删除成功");
                this.getNotice();
              })
              .catch((err) => {
                this.$message.success("删除失败");
              });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除",
            });
          });
      },
    },
    created() {
      // let s = sessionStorage.getItem('mold')
      // if (s) {
      //   let t = this.$Base64.decode(s)
      //   if (t != 'H') this.showTop = true
      // }
    },
  };
</script>
<style scoped>
  .btn {
    display: block;
    margin: 0 auto;
  }

  .avatar-uploader>>>.el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader>>>.el-upload:hover {
    border-color: #409eff;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 150px;
    height: 150px;
    line-height: 150px;
    text-align: center;
  }

  .avatar {
    width: 150px;
    height: 150px;
    display: block;
  }

  .tips {
    font-size: 12px;
    float: left;
    line-height: 1.2;
  }

  .avatar-uploader.banner>>>.el-upload {
    height: 123px !important;
  }

  .banner {
    width: 200px !important;
    height: 123px !important;
    line-height: 123px !important;
  }

  .looKWrap {
    width: 100%;
    overflow: hidden;
    margin-top: 10px;
  }

  .lookBox {
    overflow: hidden;
    border-bottom: 1px solid #999;
    margin-top: 10px;
    padding-bottom: 10px;
  }

  .lookBox:first-child {
    margin-top: 0px;
  }

  .lookBox:last-child {
    border-bottom: none;
    padding-bottom: 0;
  }

  .im {
    float: left;
    width: 150px;
    /* height: 80px; */
    margin-right: 15px;
  }

  .st {
    float: left;
  }

  .rt {
    float: right;
  }
</style>